<template>
    <div>
        <transition name="el-fade-in">
            <el-card class="dialogWrap" v-if="showValue">
                <div class="head">
                    <i
                        class="el-icon-close close"
                        style="font-size: 20px"
                        @click="showValue = false"
                    ></i>
                </div>
                <el-table
                    :header-cell-style="headerCellStyle"
                    size="mini"
                    :data="tableData"
                    border
                    style="width: 100%"
                    max-height="300px"
                >
                    <!-- 借机编码，借机申请人，借机时间，借机用途，借机数量，发货数量，已核销数量，未核销数量 -->
                    <el-table-column
                        prop="agentName"
                        label="代理商"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                    width="170"
                        prop="timePeriod"
                        label="时段"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        prop="borrowPosNum"
                        label="借机来源数"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        prop="sellPosNum"
                        label="销售来源数"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        prop="posTotalNum"
                        show-overflow-tooltip
                        label="考核数量"
                    ></el-table-column>
                    <el-table-column
                        prop="successNum"
                        show-overflow-tooltip
                        label="考核成功数"
                    ></el-table-column>
                    <el-table-column
                        prop="failNum"
                        label="考核失败数"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column prop="firstUseTime" label="操作">
                        <template slot-scope="scope">
                            <el-button
                                type="primary"
                                size="mini"
                                @click="openPage"
                                >详情</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-size="pageSize"
                        layout="prev, pager, next, total"
                        :total="pageTotal"
                    ></el-pagination>
                </div>
            </el-card>
        </transition>
    </div>
</template>

<script>
export default {
    props: {
        value: Boolean,
        currRow: Object
    },
    data () {
        return {
            showValue: true,
            currentPage: 1,
            pageSize: 10,
            pageTotal: 0,
            tableData: []
        }
    },
    watch: {
        value (val) {
            this.showValue = val
        },
        showValue (val) {
            this.$emit('update:value', val)
        }
    },
    created () {
        this.getList()
    },
    methods: {
        openPage () {
            window.open('http://oa.star-net.cn:8888/login/index', '_blank')
        },
        handleCurrentChange (value) {
            // 换页
            this.currentPage = value
            this.getList()
        },
        // 获取列表
        async getList () {
            const res = await this.$http.post(this.$store.state.IP + '/borrowDevice/posCheckResult', {
                limit: 10,
                page: this.currentPage - 1
            })
            let response = res.data
            if (response.ret === '0') {
                this.tableData = response.res.list
                this.pageTotal = response.res.total
            }
        },
        // 清空数据
        clearData () {
            this.$refs['form'].resetFields()
            this.currentPage = 1
            this.showValue = false
            this.form = {}
        }
    }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.pagination
    padding: 20px 0
    text-align: right

.dialogWrap
    position: fixed
    z-index: 999999999
    right: 20px
    top: 60px
    max-height: 400px
    width: 900px
    background: rgba(255, 255, 255, 0.9)
    // background: #fff
    border-radius: 2px

    .head
        text-align: right
        margin-bottom: 20px

    .close
        font-size: 16px
        cursor: pointer
</style>